<!--
*  2021-03-15
*  穿棕/打结
-->
<template>
  <div id="app" class="optType" tabindex="-1" ref="tabDiv">
    <!-- 头部导航 -->
    <van-nav-bar
      left-arrow
      title="选择穿棕/打结"
      left-text="重新扫码"
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <!-- 确认信息 -->
    <van-cell-group class="optType-cell">
      <van-cell :title="title">
        <template #default>
          <van-button
            type="warning"
            size="normal"
            @click="onGetWeavingOptType(1)"
            >穿 棕</van-button
          >
          <van-button
            type="primary"
            size="normal"
            @click="onGetWeavingOptType(2)"
            >打 结</van-button
          >
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 重新扫码 -->
    <van-dialog
      v-model="isLogin"
      className="login-dialog"
      title="确认重新扫码？"
      show-cancel-button
      confirm-button-text="重新扫码"
      @confirm="onClickBack"
    >
      <span>扫码后需重新登陆</span>
    </van-dialog>

    <!-- 穿综/打结 -->
    <van-dialog
      v-model="isType"
      className="login-dialog"
      title="请确认"
      show-cancel-button
      confirm-button-text="确认"
      @confirm="onClickChangeType"
    >
      <span>下一流程：{{ optType == 1 ? "穿棕" : "打结" }}</span>
    </van-dialog>
  </div>
</template>

<script>
import { getWeavingChangeOptType } from "@/api/warping";
import { getTaskStep } from "@/api/login";
import { openWin } from "@/utils/index";
export default {
  name: "OptType",
  data() {
    return {
      isLogin: false,
      isType: false,
      title: "",
      doingResUrl: "",
      craftId: "",
      optType: "",
      stepId: "",
      taskId: "",
      stepNo: "",
      resId: "",
    };
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      that.$nextTick(() => {
        that.title = window.api.pageParam.title;
        that.doingResUrl = window.api.pageParam.doingResUrl;
        that.stepId = window.api.pageParam.stepId;
        that.taskId = window.api.pageParam.taskId;
        that.stepNo = window.api.pageParam.stepNo;
        that.resId = window.api.pageParam.resId;
        // that.onGetTableData();
        // 监听页面消失的时候，关掉页面就可以了
        window.api.addEventListener(
          {
            name: "viewdisappear",
          },
          function () {
            window.api.closeWin();
          }
        );
      });
    } else {
      window.apiready = () => {
        that.title = window.api.pageParam.title;
        that.doingResUrl = window.api.pageParam.doingResUrl;
        that.stepId = window.api.pageParam.stepId;
        that.taskId = window.api.pageParam.taskId;
        that.stepNo = window.api.pageParam.stepNo;
        that.resId = window.api.pageParam.resId;
        // that.onGetTableData();
        // 监听页面消失的时候，关掉页面就可以了
        window.api.addEventListener(
          {
            name: "viewdisappear",
          },
          function () {
            window.api.closeWin();
          }
        );
      };
    }
  },
  methods: {
    // 重新扫码
    onClickLeft() {
      this.isLogin = true;
    },
    // 重新扫码
    onClickBack() {
      openWin("index");
    },
    // 获取数据
    onGetTableData() {
      const that = this;
      getTaskStep(
        {
          resUrl:
            process.env.VUE_APP_YARN_URL +
            that.doingResUrl +
            "/" +
            (that.stepNo === 5 ? that.stepNo : that.stepId),
        },
        (res) => {
          that.craftId = res.craftId;
        }
      );
    },
    // 穿棕/打结
    onGetWeavingOptType(optType) {
      this.optType = optType;
      this.isType = true;
    },
    onClickChangeType() {
      const that = this;
      getWeavingChangeOptType(
        {
          resId: that.resId,
          stepId: that.stepId,
          optType: that.optType,
        },
        () => {
          that.$toast({
            type: "success",
            message: "更改成功",
            onClose: () => {
              openWin("index");
            },
          });
        }
      );
    },
  },
};
</script>

<style lang="scss">
.optType {
  position: relative;
  top: 0;
  .optType-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    .van-cell {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 26px;
      .van-cell__title {
        flex: 0 0 80%;
      }
      .van-cell__value {
        .van-button {
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
